<template>
  <div>
    <div class="data_box">
      <!-- left_box -->
      <div class="data_box_left">
        <div class="left_top">
          <el-card class="box-card left_card">
            <div class="Tickets_text">
              工单统计 <span>{{ start }} ~ {{ end }}</span>
            </div>
            <div class="Tickets">
              <div>
                <h1>{{ total }}</h1>
                <span>工单总数（个）</span>
              </div>
              <div>
                <h1>{{ completedTotal }}</h1>
                <span>完成工单（个）</span>
              </div>
              <div>
                <h1>{{ progressTotal }}</h1>
                <span>进行工单（个）</span>
              </div>
              <div>
                <h1>{{ cancelTotal }}</h1>
                <span>取消工单（个）</span>
              </div>
            </div>
          </el-card>
          <el-card class="box-card right_card">
            <div class="sell_text">
              销售统计 <span>{{ start }} ~ {{ end }}</span>
            </div>
            <div class="sell">
              <div>
                <h1>{{ OrderCount }}</h1>
                <span>订单数(个)</span>
              </div>
              <div>
                <h1>{{ Amount }}</h1>
                <span>销售额(万元)</span>
              </div>
            </div>
          </el-card>
        </div>
        <!-- echarts_top -->
        <div class="left_bottom">
          <el-card class="box-card bottom_card">
            <div>
              <p>
                销售数据
                <span>{{ start }} ~ {{ end }}</span>
                <button @click="fn1">周</button>
                <button @click="fn2">月</button>
                <button @click="fn3">年</button>
              </p>
            </div>

            <div>
              <div ref="box" class="chart-box" style="height: 300px"></div>
              <div ref="box1" class="chart-box1" style="height: 300px"></div>
            </div>
          </el-card>
        </div>
      </div>
      <!-- echarts_top -->

      <!-- right_box -->
      <div class="data_box_right">
        <el-card class="box-card hot_card">
          <div class="shopHot_text">
            商品热榜 <span>{{ start }} ~ {{ end }}</span>
          </div>
          <div class="shopHot" v-for="(item, index) in skuTopList" :key="index">
            <div>
              <span
                class="imglist"
                :class="index === 0 || index === 1 || index === 2 ? 'imglist' + (index + 1): ''">{{ index + 1 }}</span>
              <span class="shophot_list">{{ item.skuName }}</span>
            </div>
            <div>{{ item.count }}单</div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- main_echarts_bottom -->
    <div class="main_echarts_bottom">
      <el-card class="box-card echarts_bottom_left">
        <div class="Tickets_text">
          <p>合作商点位数Top5</p>
          <span>...</span>
        </div>
        <div class="echarts_bottom_box">
          <div class="main_echarts_bottom">
            <!-- main_echarts_bottom -->
            <div ref="box3" class="chart-box3" style="height: 330px"></div>
            <!-- main_echarts_bottom -->
          </div>
          <div class="main_echarts_bottom_text">
            <h5>
              {{ VmCount }}
              <p>点位数</p>
            </h5>
            <h5>
              {{ UserCount }}
              <p>合作商数</p>
            </h5>
          </div>
        </div>
      </el-card>

      <el-card class="box-card echarts_bottom_right">
        <div class="Tickets_text">
          <p>异常设备监控</p>
          <span>...</span>
        </div>
        <div class="err_watcher">
          <img
            src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          />
          <div class="dataText">暂无数据</div>
        </div>
      </el-card>
    </div>
    <!-- main_echarts_bottom -->
  </div>
</template>

<script>
import weekday from 'dayjs/plugin/weekday'
import {
  userWork,
  orderCount,
  orderAmount,
  skuTop,
  amountCollect,
  regionCollect,
  nodeCollect,
  vmCount,
  userCount
} from '@/api/other'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
dayjs.extend(weekday)
export default {
  data () {
    return {
      start: '',
      end: '',
      /* 工单总数 */
      total: 407,
      /* 完成数 */
      completedTotal: 0,
      /* 取消总数 */
      cancelTotal: 401,
      /* 进行工单 */
      progressTotal: 0,
      /* 销售额 */
      Amount: 7.83,
      /* 订单总数 */
      OrderCount: 18945,
      /* 热榜10 */
      topValue: 10,
      skuTopList: [],
      /* 销售数据 */
      obj1: {},
      arr: [
        '星期天',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ],
      obj2: {},
      /* 饼图 */
      arrList: [],
      VmCount: 0,
      UserCount: 0
    }
  },
  async created () {
    // console.log(dayjs())
    this.start = dayjs(Date.now()).startOf('month').format('YYYY.MM.DD')
    this.end = dayjs(Date.now()).format('YYYY.MM.DD')
    this.workStatistical()
    this.orderCount()
    this.orderAmount()
    this.skuTop()
    this.vmCount()
    this.userCount()
    await this.amountCollect(
      dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'),
      1
    )
    /* 周 */
    this.obj1.xAxis = this.obj1.xAxis.map(
      (item) => this.arr[dayjs(item).format('d')]
    )
    this.echartsOne()

    await this.regionCollect(dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'))
    this.echartsTwo()

    await this.nodeCollect()
    this.echartsThree()
  },
  methods: {
    async fn1 () {
      await this.amountCollect(
        dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'),
        1
      )
      this.obj1.xAxis = this.obj1.xAxis.map(
        (item) => this.arr[dayjs(item).format('d')]
      )
      this.echartsOne()
      await this.regionCollect(
        dayjs(Date.now()).weekday(1).format('YYYY-MM-DD')
      )
      this.echartsTwo()
    },
    async fn2 () {
      await this.amountCollect(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'),
        1
      )
      this.echartsOne()
      await this.regionCollect(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD')
      )
      this.echartsTwo()
    },
    async fn3 () {
      await this.amountCollect(
        dayjs(Date.now()).startOf('year').format('YYYY-MM-DD'),
        2
      )
      this.echartsOne()
      await this.regionCollect(
        dayjs(Date.now()).startOf('year').format('YYYY-MM-DD')
      )
      this.echartsTwo()
    },
    async workStatistical () {
      const res = await userWork(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
      )
      // console.log(res)
      this.total = res[0].total + res[1].total
      this.completedTotal = res[0].completedTotal + res[1].completedTotal
      this.cancelTotal = res[0].cancelTotal + res[1].cancelTotal
      this.progressTotal = res[0].progressTotal + res[1].progressTotal
    },
    async orderCount () {
      const res = await orderCount(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
      )
      // console.log(res)
      this.OrderCount = res
    },
    async orderAmount () {
      const res = await orderAmount(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
      )
      // console.log(res)
      this.Amount = (res / 10000).toFixed(2)
    },
    async skuTop () {
      const res = await skuTop(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'),
        dayjs(Date.now()).format('YYYY-MM-DD'),
        this.topValue
      )
      // console.log(res)
      this.skuTopList = res
    },
    async amountCollect (time, count) {
      const res = await amountCollect(
        time,
        dayjs(Date.now()).format('YYYY-MM-DD'),
        count
      )
      this.obj1 = res
    },
    async regionCollect (time) {
      const res = await regionCollect(
        time,
        dayjs(Date.now()).format('YYYY-MM-DD')
      )
      this.obj2 = res
    },
    echartsOne () {
      /* echarts_one */
      const myChart = echarts.init(this.$refs.box)
      myChart.setOption({
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontSize: '14px',
            color: '#333333'
          }
        },
        tooltip: {
          trigger: 'axis' // 悬浮弹框
        },
        color: ['#ec635d'],
        xAxis: {
          type: 'category',
          data: this.obj1.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.obj1.series,
            type: 'line',
            smooth: true,
            symbolSize: 4, // 设定实心点的大小
            itemStyle: {
              normal: {
                color: '#ec635d',
                label: {
                  show: false, // 开启显示
                  position: 'bottom', // 在下方显示
                  textStyle: {
                    // 数值样式
                    color: '#65ABE7',
                    fontSize: 16
                  }
                }
              }
            },

            // 阴影样式
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(243, 93, 93,0.7)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 255, 255 , 0.1)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      })
    },
    echartsTwo () {
      /* echarts_two */
      const myChart1 = echarts.init(this.$refs.box1)
      // 绘制图表
      myChart1.setOption({
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: '14px',
            color: '#333333'
          }
        },
        tooltip: {},
        xAxis: {
          data: this.obj2.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            barWidth: '10%',
            color: '#96b0f9',
            data: this.obj2.series
          }
        ]
      })
    },
    echartsThree () {
      /* echarts_three */
      const myChart2 = echarts.init(this.$refs.box3)
      // 绘制图表
      myChart2.setOption({
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            radius: ['25%', '60%'],
            roseType: 'radius',
            type: 'pie',
            data: this.arrList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    async nodeCollect () {
      const res = await nodeCollect()
      // console.log(res)
      this.arrList = res
    },
    async vmCount () {
      const res = await vmCount()
      // console.log(res)
      this.VmCount = res
    },
    async userCount () {
      const res = await userCount()
      // console.log(res)
      this.UserCount = res
    }
  }
}
</script>

<style lang="scss" scoped>
.data_box {
  display: flex;
  .data_box_left {
    .left_top {
      display: flex;
      .left_card {
        background: #e9f3ff;
        background-image: url(data:),
          url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
        background-repeat: no-repeat;
        border-radius: 20px;
        background-position: 0 0, calc(100% - 12px) 100%;
        width: 640px;
        height: 176px;
        span {
          margin-left: 4px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
        }
        .Tickets_text {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
          p {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
          }
        }
        .Tickets {
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          h1 {
            color: #072074;
            font-size: 36px;
            font-weight: 600;
            text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          }
          span {
            height: 17px;
            margin-top: 3px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #91a7dc;
            line-height: 17px;
          }
        }
      }
      .right_card {
        width: 500px;
        height: 176px;
        margin-left: 20px;
        background: #e9f3ff;
        background: #fbefe8
          url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
          calc(100% - 12px) 100%;
        border-radius: 20px;
        .sell_text {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
          span {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
          }
        }
        .sell {
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          h1 {
            color: #ff5757;
            font-size: 36px;
            font-weight: 600;
            text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          }
          span {
            height: 17px;
            margin-top: 3px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #de9690;
            line-height: 17px;
          }
        }
      }
    }
    //     <!-- echarts -->
    .bottom_card {
      width: 1160px;
      height: 352px;
      margin-top: 20px;
      border-radius: 20px;
      p {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
      }
      span {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
      }
      .chart-box {
        width: 590px;
        display: inline-block;
        margin-top: 20px;
      }
      .chart-box1 {
        width: 520px;
        float: right;
        margin-top: 20px;
      }
    }
    //     <!-- echarts -->
  }
  .data_box_right {
    .hot_card {
      width: 398px;
      height: 550px;
      margin-left: 20px;
      border-radius: 20px;
      .shopHot_text {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
        span {
          margin-left: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
        }
      }
      .shopHot {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 25px;
        .imglist {
          background: url()
            no-repeat;
          width: 23px;
          font-size: 14px;
          color: #8e5900;
          background-position: center;
          height: 20px;
          display: inline-block;
          text-align: center;
          line-height: 18px;
          margin-left: 21px;
        }
        .imglist1 {
          background: url()
            no-repeat;
        }
        .imglist2 {
          background: url()
            no-repeat;
        }
        .imglist3 {
          background: url()
            no-repeat;
        }
        .shophot_list {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: 30px;
        }
        div {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #737589;
          line-height: 20px;
          text-align: right;
        }
      }
    }
  }
}

.main_echarts_bottom {
  display: flex;
  .echarts_bottom_left {
    width: 950px;
    height: 380px;
    margin-top: 20px;
    border-radius: 20px;
    .Tickets_text {
      display: flex;
      justify-content: space-between;
      span {
        color: #5f84ff;
        cursor: pointer;
        text-align: center;
        line-height: 6px;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        border: 1px solid#5f84ff;
      }
    }
    p {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333;
    }
    .echarts_bottom_box {
      display: flex;
      align-items: center;
      .main_echarts_bottom {
        width: 500px;
        height: 300px;

        margin-left: 70px;
        .chart-box3 {
          width: 500px;
          display: inline-block;
          margin-top: 20px;
        }
      }
      .main_echarts_bottom_text {
        width: 154px;
        height: 230px;
        margin-top: 50px;
        text-align: center;
        margin-left: 30px;
        background-color: #f6f5f5;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        h5 {
          // height: 33px;
          margin-top: 40px;
          font-size: 24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #072074;
          // line-height: 33px;
        }
        p {
          height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000412;
          line-height: 17px;
        }
      }
    }
  }
  .echarts_bottom_right {
    width: 725px;
    margin-left: 20px;
    height: 380px;
    margin-top: 20px;
    border-radius: 20px;
    .Tickets_text {
      display: flex;
      justify-content: space-between;
      span {
        color: #5f84ff;
        cursor: pointer;
        text-align: center;
        line-height: 6px;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        border: 1px solid#5f84ff;
      }
    }
    p {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333;
    }
    .err_watcher {
      width: 600px;
      height: 290px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        width: 123px;
        height: 96px;
      }
      .dataText {
        margin-top: 25px;
        color: #20232a;
        font-size: 14px;
      }
    }
  }
}
</style>
